<template>
    <div class="dept-update-container">
        <div class="dept-update-guide">
            <div 
            class="dept-update-guide-item" 
            v-for="(item, index) in guide" 
            :key="index" 
            :style="getStyle(index)"
            @click="page = index + 1" >
                {{item}}
            </div>
        </div>
        <div class="dept-update-content">
            <Update_Dept v-if="page === 1" />
            <Update_Member v-if="page === 2" />
        </div>
    </div>
</template>

<script>

import Update_Member from "@dept/vue/update-member";
import Update_Dept from "@dept/vue/update-dept";

export default {
    data() {
        return {
            guide: ["部门修改", "成员修改"],
            page: 1
        }
    },
    methods: {
        getStyle(v) {
            if (this.page === v + 1) {
                return {
                    background: "rgb(65, 116, 255)",
                    color: "white"
                }
            }
        }
    },
    components: {
        Update_Member,
        Update_Dept
    }
}
</script>

<style lang="scss">
@import "@dept/scss/update-index.scss"
</style>